<template>
  <div class="search">
    <el-input
      v-model="inputValue"
      :placeholder="$t(placeholderId)"
      clearable
      :style="{ width: `${width}px` }"
      @keyup.enter="handleClick"
    >
      <template #append>
        <el-button type="primary" @click="handleClick">{{ $t('lang.operate.search') }}</el-button>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, inject } from 'vue'
import { trim } from 'lodash'
export default defineComponent({
  emits: ['on-search'],
  props: {
    placeholderId: {
      type: String as PropType<string>,
      default() {
        return 'lang.placeholder.input'
      },
    },
    width: {
      type: String,
      default: '200',
    },
  },
  setup(props, { emit }) {
    const inputValue = ref<any>('')
    const parent = inject('skipInput')
    inputValue.value = parent
    const handleClick = () => {
      emit('on-search', trim(inputValue.value) || undefined)
    }
    return {
      inputValue,
      handleClick,
    }
  },
})
</script>

<style scoped lang="scss">
.search {
  .el-button {
    margin-left: 5px;
  }
  ::v-deep .el-input-group__append {
    padding-left: 0;
  }
}
</style>
